<template>
  <div class="inter">
    <loading v-bind:state="state"></loading>
    <div class="Container">
      <img :src="user.userPic" alt="">
      <div class="con_m">
        <p class="p4">{{user.userName}}</p>
        <p class="p4">ID：{{user.userUid}}</p>
      </div>
      <!--<div>-->
        <!--<p class="p4" v-text="getDateO"></p>-->
        <!--<p class="p4" v-text="getDateS"></p>-->
      <!--</div>-->
    </div>
    <div class="moneyContainer">
      <div class="inter_t">
        <div class="all">
          <img :src="$Public.iconImg+'allProfit.svg'" class="icon">
          <div class="p2">全部收益（元）</div>
        </div>
        <div class="p1">￥{{user.all}}</div>
      </div>
      <div class="inter_b">
        <div class="inter_b1">
          <div class="p2">{{user.today}}</div>
          <div class="p3">今日收益（元）</div>
        </div>
        <div class="inter_b2">
          <div class="p2">{{user.month}}</div>
          <div class="p3">本月收益（元）</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import Moment from 'moment';

  export default {
    name: `integral`,
    data () {
      return {
        inter: {}, // 元
        user: {
          // 用户
          userName: '', // 用户名
          userPic: '', // 头像
          userUid: '', // userid
          all: '', // 所有元
          left: '',
          month: '', // 本月元
          today: '' // 今日元
        },
        state: true,
        date: new Date(),
        dateDay: ''
      };
    },
    created () {
      // 从query中拿出数据
      this.user.userName = this.$store.state.login.userName; // 用户名
      this.user.userPic = this.$store.state.login.userPic; // 头像
      this.user.userUid = this.$store.state.login.userUid; // userid
      this.user.all = this.$route.query.all; // 所有元
      this.user.left = this.$route.query.left;
      this.user.month = this.$route.query.mouth; // 本月元
      this.user.today = this.$route.query.today; // 今日元
      console.log(this.user.month, 'user.month');
      this.state = false;
    },
    methods: {
      getIcon (icon) {
        // 获取图
        return this.$Public.pageImg + icon + '.png';
      }
    },
    computed: {
      getDateO () {
        return Moment(this.date).format('YYYY-MM-DD');
      },
      getDateS () {
        return Moment(this.date).format('hh:mm');
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
  .Container {
    flex-x()
    width:100vw;
    background: main-color
    height: vw(100px)
    padding 0 8vw;
    box-sizing border-box;
    & img {
      width: vw(46px);
      height: vw(46px);
      border-radius 50%
    }
    & .con_m {
      flex 1;
      padding 0 3vw
    }
    & p {
      line-height 1.3
    }
  }

  .p1 {
    word(36px, main-color)
  }

  .p2 {
    word(16px, second-ash)
  }

  .p3 {
    word(14px, third-ash)
    margin-top: 1vw;
  }

  .p4 {
    word(16px, white)
  }

  .inter {
    flex-y();
    width: 100vw
  }

  .moneyContainer {
    flex-y()
    width: 100vw;
    background: white
    margin 10px 0;
    height: vw(205px)
    position relative;
    box-sizing border-box;
    .inter_t{
      width: 100%;
      padding: 0 5vw 5vw;
      box-sizing: border-box;
      bor-b();
    }
    .inter_b {
      flex-x();
      width 100%
      padding: 5vw 8vw 0;
      box-sizing: border-box;
      justify-content space-between
      .inter_b1{
        width: 50%;
        bor-r();
      }
    }
    .all{
      flex-x(flex-start);
      padding 0 0 2vw 3vw
      .icon{
        width:vw(30)
        height:vw(30)
        display inline-block
        margin-right 3vw
      }
    }
  }

  .space {
    space()
  }
</style>
